<template>
	<view class="wallent-view">
		<view class="wallent-title">我的钱包</view>
		<view class="wallent-total">
			<image src="/static/wallent_bg.png" mode="" class="wallent-bg"></image>
			<view class="fx-center">
				<view class="total-item">
					<view class="">可提现(元)</view>
					<view class="num">{{balance}}</view>
				</view>
				<view class="total-item">
					<view class="">待入账(元)</view>
					<view class="num">{{unsettle}}</view>
				</view>
			</view>

			<view class="withdraw-btn" @click="toWithdraw">去提现</view>
		</view>
		<view class="main-basic-name">余额明细</view>
		<view class="money-box">
			<template v-if="list.length>0">
				<view class="money-list" v-for="(item,index) in list" :key="item.id">
					<view class="fx-center-between money-top">
						<view class="">{{item.title}}</view>
						<view class="num fx-center">
							<text class="tip-text" v-if="item.withdraw_approving">等待平台提现审核</text>
							{{Number(item.from_value) > Number(item.to_value)?'-':'+'}}{{item.value}}
						</view>
					</view>
					<view class="fx-center-between money-bottom">
						<view class="">{{item.time}}</view>
						<view class="">余额：{{item.to_value}}</view>
					</view>
				</view>
				<view class="no-more" v-if="isEnd">
					没有更多了
				</view>
			</template>
			<template v-else>
				<view class="mo-data">
					<image src="/static/no_project.png" mode="widthFix"></image>
					<view class="">暂无数据</view>
				</view>

			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0, //可提现
				unsettle: 0, //待入账
				page: 1,
				total: 0,
				list: [],
				isEnd: false
			};
		},
		onShow() {
			this.getMyWallent()
			this.page = 1
			this.getList()
		},
		onPullDownRefresh() {
			this.getMyWallent()
			this.page = 1
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			}
		},
		computed: {
			// 判断是否还有更多余额明细数据
			isEnd() {
				if (this.list.length >= this.total) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			// 获取我的钱包
			getMyWallent() {
				this.$api.requst(`/gwc/user/wallet`, {}).then((res) => {
					this.balance = res.data.balance
					this.unsettle = res.data.unsettle
				})
			},
			// 获取余额明细
			getList() {
				this.$api.requst(`/gwc/user/trade_logs`, {
					page: this.page
				}).then((res) => {
					this.total = res.total
					if (this.page === 1) {
						this.list = res.data
					} else {
						res.data.forEach(item => {
							this.list.push(item)
						})
					}

				})
			},
			// 提现
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/mine/myWallent/withdraw/withdraw'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wallent-view {
		margin: 8rpx 24rpx 50rpx;

		.wallent-title {
			font-weight: bold;
			font-size: 44rpx;
			color: #161616;
		}

		.wallent-total {
			padding: 40rpx 32rpx 36rpx;
			position: relative;
			color: #fff;
			margin-top: 32rpx;

			.wallent-bg {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.total-item {
				flex: 1;
				font-size: 26rpx;
				color: #FFFFFF;

				.num {
					font-weight: bolder;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-top: 16rpx;
				}
			}

			.withdraw-btn {
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				background-color: #FFFFFF;
				padding: 16rpx 0;
				margin-top: 32rpx;
				font-size: 32rpx;
				color: #4078E5;
				font-weight: bold;
				text-align: center;
			}
		}

		.main-basic-name {
			margin: 32rpx 0;
		}

		.money-box {
			background-color: #fff;
			border-radius: 4rpx;
			padding: 32rpx;
			min-height: 782rpx;

			.money-list:not(:first-child) {
				margin-top: 40rpx;
			}

			.money-top {
				font-size: 30rpx;
				color: #161616;

				.num {
					font-weight: bold;
				}

				.tip-text {
					font-size: 26rpx;
					color: #FF5C00;
					font-weight: normal;
					margin-right: 8rpx;
				}
			}

			.money-bottom {
				margin-top: 14rpx;
				font-size: 26rpx;
				color: #8A8F99;
			}

			.no-more {
				margin-top: 40rpx;
				font-size: 26rpx;
				color: #8A8F99;
				text-align: center;
			}
		}

		.mo-data {
			padding-top: 50%;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;
			color: #8A8F99;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>